<script setup>
import { useWebSocket } from '@vueuse/core'

const statusText = ref('')
// 获取麦克风权限
const getMicrophonePermission = async () => {
  try {
    statusText.value = '正在请求麦克风权限...'
    stream.value = await navigator.mediaDevices.getUserMedia({ audio: true })
    // statusText.value = '麦克风权限已获取'
    initAudioVisualizer(stream.value)
    startAsrRef.value.disabled = false
    return true
  } catch (error) {
    console.error('获取麦克风权限失败:', error)
    statusText.value = '获取麦克风权限失败'
    return false
  }
}



















const startAsr = () =>{
    console.log("开始录音")
}
const stopAsr = () =>{
    console.log("停止录音")
}
const handleKeydown = (event) =>{
    if(event.code === "Space"){
        startAsr()
    }    
    window.removeEventListener("keydown", handleKeydown);
}
const handleKeyup = (event) =>{
    if(event.code === "Space"){
        stopAsr()
    }
    window.addEventListener("keydown", handleKeydown);
}
const onUnmounted = () =>{
    window.removeEventListener("keydown", handleKeydown);
}

window.addEventListener("keydown", handleKeydown);
window.addEventListener("keyup", handleKeyup);

</script>

<template>
     <div class="containerASR">
        <h1 class="title">语音识别</h1>
        <div class="fun_view">
            <div class="fun">
                <div class="controls">
                    <button ref="startAsrRef" @click="startAsr">开始录音</button>
                    <button ref="stopAsrRef" @click="stopAsr" disabled>停止录音</button>
                </div>
                <div class="status">
                    <p id="statusText">准备就绪</p>
                </div>
            </div>
            <div class="view">
                <canvas ref="canvasRef" class="canvas"></canvas>
            </div>
        </div>
       
        <div class="result">
            <h2 class="text">识别结果：</h2>
            <div class="resultText" ref="resultTextRef"></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.containerASR{
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    user-select: none;
    .title{
        color: #333;
    }
    .fun_view{
        height: 120px;
        display: flex;
        .fun{
            flex: 1;
            .controls {
                display: flex;
                justify-content: center;
                margin: 20px 0;
                gap: 10px;
                button {
                    padding: 10px 20px;
                    font-size: 16px;
                    cursor: pointer;
                    background-color: #4CAF50;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    transition: background-color 0.3s;
                    &:hover {
                        background-color: #45a049;
                    }
                    &:disabled {
                        background-color: #cccccc;
                        cursor: not-allowed;
                    }
                }
            }
            .status {
                text-align: center;
                margin: 10px 0;
                font-size: 16px;
                color: #666;
            }
        }
        .view{
            flex: 1;
            width: 100%;
            height: 100%;
            background: #f9f9f9;
            .canvas {
                width: 100%;
                height: 100%;
            }
        }
    }
   
    .result {
        margin-top: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 4px;
        border: 1px solid #ddd;
        flex: 1;
        display: flex;
        flex-direction: column;
        .resultText{
            width: 100%;
            height: 100%;
            line-height: 1.5;
            padding: 10px;
            user-select: text;
            overflow-y: auto;          
        }
    }

}
</style>
